<template>
  <div class="home">
    <!-- 2.疫情热点 -->
    <HotInfo :news="news"></HotInfo>
    <!-- 3.疫情小导航 -->
    <div class="list">
      <div>
        <img src="../../assets/images/1.png" alt="">
        <div>风险地区</div>
      </div>
      <div>
        <img src="../../assets/images/2.png" alt="">
        <div>核算检测</div>
      </div>
      <div>
        <img src="../../assets/images/3.png" alt="">
        <div>防疫物资</div>
      </div>
      <div>
        <img src="../../assets/images/4.png" alt="">
        <div>出行</div>
      </div>
    </div>
    <!-- 4.国内疫情数据 -->
    <CovNumber :covData="covData"></CovNumber>
    <!-- 5.全国疫情分布 -->
    <ChinaMap></ChinaMap>
  </div>
</template>

<script>
import HotInfo from './CovInfo/HotInfo.vue'
import CovNumber from './CovInfo/CovNumber.vue'
import ChinaMap from './VueMap/ChinaMap.vue'
export default {
  name: 'HomeView',
  components:{
    HotInfo,CovNumber,ChinaMap
  },
  data(){
     return{
      news:[],
      covData:{},
     }
  },
  //生命周期函数
  created(){
    //疫情信息
    this.$api.getConInfo()
    .then(res=>{
      console.log(res.data);
      //1.疫情热点新闻信息
      this.news=res.data.result.news;
      //2.国内疫情数据统计
      let data=res.data.result.desc;
      let{currentConfirmedCount,confirmedCount,suspectedCount,curedCount,deadCount,seriousCount,suspectdeIncr,currentConfirmedIncr,confirmedIncr,curedIncr,
            deadIncr,seriousIncr}=data
      this.covData={
        currentConfirmedCount,confirmedCount,suspectedCount,curedCount,deadCount,seriousCount,suspectdeIncr,currentConfirmedIncr,confirmedIncr,curedIncr,
            deadIncr,seriousIncr
      }
    })
  },
  methods:{
  }
}
</script>
<style scoped>

.list {
  display: flex;
  padding-bottom: 0.2rem;
}
.list div{

    flex: 1;
    text-align: center;
    color: #666;

    
  }
.list div img{
      width: 0.8rem;
      height: 0.8rem;
}
</style>